<button type="button" onclick="reportPrint()" class="col-auto btn btn-light">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-printer" viewBox="0 0 20 20">
  <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/>
  <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1"/>
</svg>直接打印</button>
        <div class="dropdown" >

                  <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                        打印选项
                  </button>
                  <div class="dropdown-menu">
                    <button class="dropdown-item" onclick="reportPreview(); closeDropdown();">打印预览</button>
                    <button class="dropdown-item" onclick="designReport(); event.stopPropagation();">报表设计</button>
                    <button class="dropdown-item" onclick="createReport(); event.stopPropagation();">新增报表模版</button>
                      <button class="dropdown-item" onclick="alterReportName(); event.stopPropagation();">修改报表模版名称</button>
                    <a class="dropdown-item" href="#">导出pdf</a>
                  </div>
            </div>
        <div class="col-2">
                <select   class="form-select"
                          style="padding-top: 3px;margin-top: 1px;margin-bottom: 1px"
                          name="report_style" id="reportStyleSelect">
                  {% for report in reports %}
                    <option value="{{ report.report_file }}" data-name="{{ report.report_name }}"
                    data-code="{{ report.code }}" data-type="{{ report.type }}"
                    >{{ report.report_name }}</option>
                    {% endfor %}
                 <!-- 若没有报表数据，显示“无可用样式”并禁用下拉框 -->
                    {% if not reports %}
                        <option value="" disabled>无可用报表样式，请先创建</option>
                    {% endif %}
                </select>
            </div>
            <input type="hidden" name="report_code" value="{{ report_code }}">
            <input type="hidden" name="report_type" value="{{ report_type }}">
<script type="text/javascript">
    // 在每个dropdown-item的onclick中添加关闭逻辑
function closeDropdown() {
    const dropdown = document.querySelector('.dropdown');
    const dropdownInstance = bootstrap.Dropdown.getInstance(dropdown);
    if (dropdownInstance) {
        dropdownInstance.hide(); // 关闭下拉菜单
    }
}
            // 修正函数定义：使用标准函数声明，去掉错误的 => 语法
// 新增：清除表单中已有的临时字段
function clearTempFields() {
    const form = document.getElementById('form');
    // 移除所有name为print_type、report_name的临时字段
    document.querySelectorAll('input[name="print_type"], input[name="report_name"], input[name="print_data"]').forEach(el => {
        form.removeChild(el);
    });
}
function checkReportStyle() {
    // 获取下拉框元素
    const reportSelect = document.querySelector('select[name="report_style"]');
    // 获取选中的值（去空格）
    const selectedStyle = reportSelect.value.trim();

    // 校验1：无可用报表样式（下拉框只有“无可用样式”选项）
    if (!reportSelect.options.length || (reportSelect.options.length === 1 && reportSelect.options[0].value === "")) {
        alert("暂无可用的报表样式，请先在【新增报表样式】中创建样式！");
        return false;
    }

    // 校验2：已选择“请选择报表样式”的空选项
    if (!selectedStyle) {
        alert("请先选择一个报表样式再打印！");
        // 聚焦到下拉框，引导用户选择
        reportSelect.focus();
        return false;
    }

    // 校验通过
    return true;
}
function reportPreview() {
         // 先校验样式，不通过则不提交
       if (!checkReportStyle()) return;

        const form = document.getElementById('form');
        // 阻止表单默认提交事件（如果有的话）
            form.onsubmit = function(e) {
                e.preventDefault();
                return false;
            };
            // 先清除旧的临时字段
            clearTempFields();


        // 若报表设计接口不同，修改 action
        form.action = "{% url 'printP' %}" ;
        form.method='post'
        form.target="_blank"
        // 2. 创建新的隐藏字段（参数1：type = "preview"）
        const typeInput = document.createElement('input');
        typeInput.type = 'hidden'; // 隐藏字段，不在页面显示
        typeInput.name = 'print_type';   // 参数名
        typeInput.value = 'preview'; // 参数值（根据需求设置）
        form.appendChild(typeInput);

        form.submit();
    }
function reportPrint() {
         // 先校验样式，不通过则不提交
       if (!checkReportStyle()) return;

        const form = document.getElementById('form');
        // 阻止表单默认提交事件（如果有的话）
            form.onsubmit = function(e) {
                e.preventDefault();
                return false;
            };
            // 先清除旧的临时字段
            clearTempFields();

        // 若报表设计接口不同，修改 action
        form.action = "{% url 'printP' %}" ;
        form.method='post'
        form.target="_blank"
        // 2. 创建新的隐藏字段（参数1：type = "preview"）
        const typeInput = document.createElement('input');
        typeInput.type = 'hidden'; // 隐藏字段，不在页面显示
        typeInput.name = 'print_type';   // 参数名
        typeInput.value = 'print'; // 参数值（根据需求设置）
        form.appendChild(typeInput);

        form.submit();
    }
// 报表设计按钮逻辑（若需跳转设计页面，修改此处 URL）
function designReport() {
    // 先校验样式，不通过则不提交
    if (!checkReportStyle()) return;
    // 2. 获取当前选中的报表样式和原名称
    const reportSelect = document.getElementById('reportStyleSelect');
    const selectedOption = reportSelect.options[reportSelect.selectedIndex];
    const originalName = selectedOption.getAttribute('data-name'); // 原名称


    const form = document.getElementById('form');
     // 阻止表单默认提交事件（如果有的话）
                form.onsubmit = function(e) {
                    e.preventDefault();
                    return false;
                };
    // 若报表设计接口不同，修改 action
    form.action = "{% url 'printP' %}" ;
    form.method='post'
    form.target="_blank"
    // 2. 创建新的隐藏字段（参数1：type = "preview"）
    const typeInput = document.createElement('input');
    typeInput.type = 'hidden'; // 隐藏字段，不在页面显示
    typeInput.name = 'print_type';   // 参数名
    typeInput.value = 'design'; // 参数值（根据需求设置）
    form.appendChild(typeInput);
    // 2. 创建新的隐藏字段（参数1：type = "preview"）
    const typeInput2 = document.createElement('input');
    typeInput2.type = 'hidden'; // 隐藏字段，不在页面显示
    typeInput2.name = 'report_name';   // 参数名
    typeInput2.value = originalName; // 参数值（根据需求设置）
    form.appendChild(typeInput2);
    form.submit();
}
function createReport() {

        // 弹出输入框获取报表名称（第二个参数为默认提示文本）
        const reportName = prompt("请输入报表名称：不要文件后缀名", "例如：xx报表");

        // 判断用户是否输入（取消时返回null，空字符串视为未输入）
        if (!reportName || reportName.trim() === "") {
            alert("报表名称不能为空！");
            return; // 不提交表单
        }

        const form = document.getElementById('form');
        // 阻止表单默认提交事件（如果有的话）
        form.onsubmit = function(e) {
            e.preventDefault();
            return false;
        };
    // 若报表设计接口不同，修改 action
    form.action = "{% url 'printP' %}" ;
    form.method='post'
    form.target="_self"
    // 2. 创建新的隐藏字段（参数1：type = "preview"）
    const typeInput = document.createElement('input');
    typeInput.type = 'hidden'; // 隐藏字段，不在页面显示
    typeInput.name = 'print_type';   // 参数名
    typeInput.value = 'creatReport'; // 参数值（根据需求设置）
    form.appendChild(typeInput);
    // 2. 创建新的隐藏字段（参数1：type = "preview"）
    const typeInput2 = document.createElement('input');
    typeInput2.type = 'hidden'; // 隐藏字段，不在页面显示
    typeInput2.name = 'report_name';   // 参数名
    typeInput2.value = reportName.trim(); // 参数值（根据需求设置）
    form.appendChild(typeInput2);
    form.submit();
    }
// 修改报表名称函数
function alterReportName() {
            // 1. 校验是否选择了报表样式
            if (!checkReportStyle()) return;

            // 2. 获取当前选中的报表样式和原名称
            const reportSelect = document.getElementById('reportStyleSelect');
            const selectedOption = reportSelect.options[reportSelect.selectedIndex];
            const originalName = selectedOption.getAttribute('data-name'); // 原名称
            const reportStyle = selectedOption.value; // 报表样式标识

            // 3. 弹出输入框，默认显示原名称
            const newName = prompt("请输入修改后的报表名称：不要后缀名", originalName);

            // 4. 校验输入（取消或空值则终止）
            if (newName === null) {
                // 用户点击取消
                return;
            }
            if (newName.trim() === "") {
                alert("报表名称不能为空！");
                return;
            }
            if (newName.trim() === originalName.trim()) {
                alert("新名称与原名称一致，无需修改！");
                return;
            }


            const form = document.getElementById('form');
            // 阻止表单默认提交事件（如果有的话）
        form.onsubmit = function(e) {
            e.preventDefault();
            return false;
        };
    // 若报表设计接口不同，修改 action
    form.action = "{% url 'printP' %}" ;
    form.method='post'
    form.target="_self"
    // 2. 创建新的隐藏字段（参数1：type = "preview"）
    const typeInput = document.createElement('input');
    typeInput.type = 'hidden'; // 隐藏字段，不在页面显示
    typeInput.name = 'print_type';   // 参数名
    typeInput.value = 'altReportName'; // 参数值（根据需求设置）
    form.appendChild(typeInput);
    // 2. 创建新的隐藏字段（参数1：type = "preview"）
    const typeInput2 = document.createElement('input');
    typeInput2.type = 'hidden'; // 隐藏字段，不在页面显示
    typeInput2.name = 'report_name';   // 参数名
    typeInput2.value = newName.trim(); // 参数值（根据需求设置）
    form.appendChild(typeInput2);
    form.submit();
        }
</script>